<script setup lang="ts">
import { NForm, NFormItem, NInput, type UploadFileInfo, NIcon } from 'naive-ui'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import FileList from '@/components/FileList.vue'
import type { HttpResponse } from '@/utils/http'
import type { IdentifyInfoModel } from '@/api/batch'
import { ArrowRightAltFilled } from '@vicons/material'
import ClueDetail from './ClueDetail.vue'
import BatchClueItemsDetail from './BatchClueItemsDetail.vue'

const route = useRoute()

const processInfo = ref(
  {} as {
    finish: boolean
    register: boolean
    submit: boolean
  }
)
const process = async (id: number) => {
  const [error, res] = await sendRequest({
    module: 'batch',
    api: 'identifyProcess',
    override: {
      params: {
        batchId: route.params.id,
        identifyId: id || null
      }
    }
  })
  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  processInfo.value = res.data
}

const identifyInfo = ref({} as IdentifyInfoModel)
const queryIdentifyInfo = async () => {
  try {
    const [error, res] = await sendRequest<HttpResponse<IdentifyInfoModel>>({
      module: 'batch',
      api: 'identifyLast',
      override: {
        params: {
          batchId: route.params.id
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    if (res.data.fileIds) res.data._files = await queryFileList(res.data.fileIds)
    identifyInfo.value = res.data
    process(res.data.id)
  } catch (error) {
    console.error(error)
  }
}

const queryFileList = async (filesIds: string): Promise<UploadFileInfo[]> => {
  try {
    const [error, res] = await sendRequest<
      HttpResponse<
        {
          name: string
          path: string
          id: string
          type: string
        }[]
      >
    >({
      module: 'upload',
      api: 'list',
      override: {
        params: {
          ids: filesIds
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)

    return res.data.map((e) => ({
      id: e.id,
      name: e.name,
      status: 'finished',
      url: e.path,
      type: e.type
    }))
  } catch (error) {
    return []
  }
}

onMounted(() => {
  queryIdentifyInfo()
})
</script>

<template>
  <div class="bd-title">鉴定流程</div>
  <div class="bd-flow bd-card">
    <div
      class="step"
      :class="{ finished: processInfo.submit }"
    >
      提交鉴定
    </div>
    <NIcon
      color="#6CB187"
      size="32"
    >
      <ArrowRightAltFilled />
    </NIcon>
    <div
      class="step"
      :class="{ finished: processInfo.register }"
    >
      鉴定登记
    </div>
    <NIcon
      color="#6CB187"
      size="32"
    >
      <ArrowRightAltFilled />
    </NIcon>
    <div
      class="step"
      :class="{ finished: processInfo.finish }"
    >
      鉴定结束
    </div>
  </div>
  <div class="br"></div>

  <ClueDetail />
  <div class="br"></div>

  <div class="bd-title">基本信息</div>
  <DetailFormProvider>
    <NForm
      disabled
      label-placement="left"
      label-width="100rem"
      class="bd-card grid columns-2"
    >
      <NFormItem label="鉴定名称：">
        <NInput
          placeholder="/"
          :value="identifyInfo.identifyName"
        />
      </NFormItem>
      <NFormItem label="鉴定日期：">
        <NInput
          placeholder="/"
          :value="identifyInfo.identifyTime"
        />
      </NFormItem>
      <NFormItem label="鉴定地点：">
        <NInput
          placeholder="/"
          :value="identifyInfo.identifyAddress"
        />
      </NFormItem>
      <NFormItem label="鉴定类型：">
        <NInput
          placeholder="/"
          :value="identifyInfo.identifyType"
        />
      </NFormItem>
      <NFormItem label="鉴定专家：">
        <NInput
          placeholder="/"
          :value="identifyInfo.identifyExperts?.join('，')"
        />
      </NFormItem>
      <NFormItem label="描述：">
        <NInput
          placeholder="/"
          type="textarea"
          :value="identifyInfo.identifyDescription"
          rows="1"
        />
      </NFormItem>
      <NFormItem label="附件：">
        <FileList
          v-if="identifyInfo.fileIds"
          :file-list="identifyInfo._files"
        />
      </NFormItem>
    </NForm>
  </DetailFormProvider>
  <div class="br"></div>

  <BatchClueItemsDetail />
</template>

<style lang="scss" scoped>
.bd-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.bd-card {
  padding: 20rem;
  background-color: #e1e1e1;
}

.n-form.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 60rem;

  &.columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bd-flow {
  display: flex;
  align-items: center;
  padding: 20rem 20rem 30rem;
  gap: 0 1.5em;

  .step {
    padding: 10rem 15rem;
    background-color: #e1e1e1;

    &.finished {
      color: #fff;
      background-color: #6cb187;
    }
  }
}
</style>
